<template>
  <div class="container" style="padding-bottom: 56px">
    <div class="swipe">
      <var-swipe class="swipe-example" :autoplay="2000" v-model:imageList="imageList" :loading="loading">
        <var-swipe-item v-for="(image, index) in imageList" :key="index">
          <img class="swipe-example-image" :src="image.url" alt="'Image ' + (index + 1)" />
        </var-swipe-item>
      </var-swipe>
    </div>
    <div class="info">
      <div class="eventActivity-name">
        <van-cell-group class="eventActivity-title-group" inset>
          <van-cell class="eventActivity-title" title-style="font-weight: bold" :title="detailData.name" :label="detailData.typeName" />
          <van-cell :title="'乡村名:' + detailData.rusticName" />
        </van-cell-group>
      </div>
      <div class="eventActivity-detail">
        <van-cell-group inset>
          <van-cell :title="'地址:' + detailData.address" :label="detailData.detailedAddress">
            <template #right-icon>
              <van-icon name="location-o" class="location-icon" />
            </template>
          </van-cell>
          <van-cell :title="'时间:' + formatToDateTime(detailData.startTime, format) + '-' + formatToDateTime(detailData.endTime, format)">
            <template #right-icon>
              <van-icon name="calendar-o" class="location-icon" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="eventActivity-rich">
        <view v-html="formatRichText(detailData.introduce)" />
      </div>
    </div>
    <div class="action-bar">
      <van-action-bar bottom>
        <van-action-bar-icon icon="eye-o" :text="`${detailData.browseCount}`" />
        <van-action-bar-icon
          :icon="detailData.collection ? 'star' : 'star-o'"
          :color="detailData.collection ? '#ff5000' : ''"
          :text="`${detailData.collectionCount}`"
          @click="collectionAddDel"
        />
        <van-action-bar-icon
          :icon="detailData.like ? 'like' : 'like-o'"
          :color="detailData.like ? '#fc484e' : ''"
          :text="`${detailData.likeCount}`"
          @click="likeAddDel"
        />
        <van-action-bar-button
          color="#4B6F8CFF"
          type="primary"
          text="进入乡村"
          @click="router.replace({ path: '/detailList', query: { id: detailData.rusticId } })"
        />
      </van-action-bar>
    </div>
  </div>
</template>

<script setup lang="ts">
  import useRequestDetail from '@/hooks/useRequestDetail';
  import { getFileHttpUrl } from '@/utils/urlUtils';
  import { formatRichText } from '@/utils/util';
  import { collectionUpdate } from '@/api/collection';
  import { linkTypeEnum } from '@/enums/LinkTypeEnum';
  import { message } from 'ant-design-vue';
  import { likeUpdate } from '@/api/like';
  import { browseAdd } from '@/api/browse';
  import { eventActivityApi } from '@/api/eventActivity';
  import { formatToDateTime } from '@/utils/dateUtil';

  const router = useRouter();
  const route = useRoute();
  const format = 'YYYY-MM-DD HH:mm';

  const imageList = ref<{ url: string }[]>([]);

  const { detailData, loading, getDetail } = useRequestDetail({
    apiKey: eventActivityApi.eventActivityDetail,
    initParams: route?.query,
    isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });

  const getData = async () => {
    getDetail().then(() => {
      if (detailData.value) {
        const imageStr = detailData.value.images;
        const list = imageStr && imageStr?.split(',');
        if (list && list.length) {
          imageList.value = list.map((item): { url: string } => {
            return { url: getFileHttpUrl(item) };
          });
        } else {
          imageList.value = [];
        }
        if (imageList.value.length === 0) {
          const image = { url: getFileHttpUrl(detailData.value.cover) };
          imageList.value.push(image);
        }
      }
    });
  };

  /**
   * 收藏
   */
  const collectionAddDel = async () => {
    const targetId = parseInt(route?.query?.id);
    const res = await collectionUpdate({ targetId: targetId, type: linkTypeEnum.ACTIVITY });
    if (res) {
      message.success(res?.msg);
      if (detailData.value.collection) {
        // 原来为true,请求取消
        detailData.value.collectionCount = detailData.value.collectionCount - 1;
      } else {
        detailData.value.collectionCount = detailData.value.collectionCount + 1;
      }
      detailData.value.collection = !detailData.value.collection;
    }
  };

  /**
   * 点赞
   */
  const likeAddDel = async () => {
    const targetId = parseInt(route?.query?.id);
    const res = await likeUpdate({ targetId: targetId, type: linkTypeEnum.ACTIVITY });
    if (res) {
      message.success(res?.msg);
      if (detailData.value.like) {
        // 原来为true,请求取消
        detailData.value.likeCount = detailData.value.likeCount - 1;
      } else {
        detailData.value.likeCount = detailData.value.likeCount + 1;
      }
      detailData.value.like = !detailData.value.like;
    }
  };

  const addBrowse = async () => {
    const targetId = parseInt(route?.query?.id);
    await browseAdd({ targetId: targetId, type: linkTypeEnum.ACTIVITY });
  };

  onMounted(async () => {
    await getData();
    await addBrowse();
  });
</script>

<style lang="scss" scoped>
  .container {
    .info {
      //padding: 5px;
      .eventActivity-name {
        .eventActivity-title-group {
          --van-cell-group-title-font-size: 100px;
        }
        .eventActivity-title {
          --van-cell-font-size: 40px;
        }
      }

      .eventActivity-detail {
        margin-top: 15px;
        --cell-min-height: 50px;
        --cell-padding: 0, 20px;
        .eventActivity-address {
          font-weight: 500;
        }
        .location-icon {
          font-size: 40px;
          line-height: inherit;
        }
      }
      .eventActivity-rich {
        background: #fdfdfd;
        margin-top: 30px;
        padding: 40px;
      }
    }

    .swipe-example {
      height: 30%;
      //height: 500px;
    }

    .swipe-example-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
  }
</style>
